<template>
  <div class="progress">
			<div class="label">{{val}} <span v-if="isshow">%</span> </div>
			<div class="pie-wrap" ref="piet"></div>
			<h3>{{title}}</h3>
  </div>
</template>

<script>
export default {
  name: 'progresst',
	props: {
		title: {//文字
			type: String,
			default: "progress.vue里面的title"
		},
		val: {//数据
			type: Number,
			default:0
		},
		isshow: { //%
			type: Boolean,
			required:true,
			default: false,
		}
	},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
	mounted(){// 绘制图表 https://www.cnblogs.com/Smiled/p/7686316.html(参考文章)
		 let data=[];
		 if(this.isshow){	 // 显不显示%号
			 data.push({value:this.val,name:''}),
			 data.push({value:100-this.val,name:''})
		 }else{
			 data.push({value:0,name:''}),
			 data.push({value:100,name:''})
		 }
	
		let myChart =this.$echarts.init(this.$refs.piet);
		console.log(" myChartpiet",myChart)
		myChart.setOption( {
    color:['rgb(102,208,113)','rgb(223,223,223)'],
    series: [
        {
            name:this.title,
            type:'pie',
            radius: ['95%', '100%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center',
                    textStyle:{
                        fontSize:'48',
                        fontWeight:'bold'
                    }
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data
        }
    ]
	});
	},
}
</script>

<style lang="scss" scoped>
	.progress{
		background: #FFFFFF;
		position: relative;
		text-align: center;
		color: #000000;
		@mixin hww{
			width: px2rem(175);
			height: px2rem(175);
		}
		.pie-wrap{
			@include hww();
		}
		.label{
			line-height: px2rem(175);
			position: absolute;
			left: 0;
			top: 0;
			font-size: px2rem(48);
			@include hww();
			span{
				vertical-align: super;
				font-size: $text-size;
			}
		}
		h3{
			font-size: $text-size;
			padding:px2rem(27) 0 px2rem(52);
		}
		
	}
	
	
</style>
